import React, { useState, useEffect } from 'react';
import { message } from "antd";
import { useDispatch, useSelector } from 'react-redux'
import { changeUserInfo } from "@/store/modules/userSlice"
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    ShopOutlined,
    FundViewOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Button, Flex, Layout, Menu, theme, Avatar, type MenuProps, Dropdown, Modal } from 'antd';
import "./index.less"
import { Outlet, Link, useNavigate } from 'react-router-dom';
import Edit from './components/edit';
import { resetData } from "@/_mock/assets"
import { doLogout } from "@/store/modules/userSlice"
import { logout } from "@/api/service/userService"
const { Header, Sider, Content } = Layout;


const DashboardLayout: React.FC = () => {
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate();
    const user = useSelector((state: any) => state.user.userInfo)
    const dispatch = useDispatch()

    const showLogoutConfirm = () => {
        Modal.confirm({
            title: '确认退出登录',
            content: '你确定要退出登录吗？',
            okText: '确认',
            cancelText: '取消',
            onOk: handleLogout,
        });
    };

    // 退出登录
    const handleLogout = () => {
        // 清空本地存储，跳转到登录界面
        logout().then(val => {
            messageApi.open({
                type: 'success',
                content: "退出登录成功~",
            }).then(() => {
                dispatch(doLogout(""));
                resetData();
                localStorage.removeItem('token')
                dispatch(changeUserInfo({}))
                navigate('/login');
            });

        }).catch(err => {
            console.log(err);
            messageApi.open({
                type: 'error',
                content: err.message,
            })
        })

    }

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const onClick: MenuProps['onClick'] = (e) => {
        console.log('click ', e);
    };

    const items: MenuProps['items'] = [
        {
            key: '1',
            label: (
                <Edit />
            ),
        },
        {
            key: '2',
            label: (
                <a onClick={showLogoutConfirm}>
                    退出登录
                </a>
            ),
        }
    ];
    const label = [
        {
            key: '1',
            icon: <ShopOutlined />,
            label: (
                <Link to="/workbench">商品管理</Link>
            ),
        }
    ]
    if (user.role.label==='admin') {
        label.push({
            key: '2',
            icon: <FundViewOutlined />,
            label: (
                <Link to="/workbench/statistics">商品大屏</Link>
            ),
        },)
    }

    return (
        <Layout className="dashboard-layout" style={{ height: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className={!collapsed ? 'logo-vertical collapsed' : 'logo-vertical'} />
                <Menu
                    onClick={onClick}
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={label}
                />
            </Sider>
            {contextHolder}
            <Layout >
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <Flex justify="space-between">
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}
                        />
                        {/* 头部导航栏 */}
                        <div className='header-main' style={{ marginRight: 40 }}>
                            <Dropdown menu={{ items }} placement="bottomRight">
                                <div>
                                    <span style={{ marginRight: 10, zIndex: 20 }}>{user.username}</span>
                                    <Avatar src={user.avatar} size={40} icon={<UserOutlined />} />
                                </div>
                            </Dropdown>
                        </div>
                    </Flex>
                </Header>
                <Content
                    style={{
                        margin: '16px 8px',
                        padding: 0,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                        overflow: 'auto'
                    }}
                >
                    <Outlet />
                </Content>
            </Layout>
        </Layout>
    );
};

export default DashboardLayout